<template>
  <div>
    <input type="text" v-model.trim="inputValue">
    <!-- 使用 -->
    <button @click="tiJiao">提交</button>
    <button @click="suiji">请求随机文字</button>
    <ul>
      <li v-for="item in personList" :key="item.id">{{item.name}}</li>
    </ul>
    <h3>人员列表长度*2：{{twoPlus}}</h3>
    <h3 style="color:red">上面计数值：{{count}}</h3>
  </div>
</template>

<script>
/*
获取数据/方法的方式见下，注意getters和state获取方式有所不同。
如果不清楚可以在 mounted 打印 this.$store 看看，获取之后直接使用即可。
*/
export default {
  data () {
    return {
      inputValue: ''
    }
  },
  mounted () {
    console.log(this.$store)
  },
  computed: {
    personList () {
      // 获取state：
      // this.$store.state.配置模块名.state数据名
      return this.$store.state.personStore.personList
    },
    twoPlus () {
      // 获取getters：
      // this.$store.getters['配置模块名/getters方法名']
      return this.$store.getters['personStore/twoPlus']
    },
    // 获取另一个模块的数据：
    count () {
      // this.$store.state.配置模块名.state数据名
      return this.$store.state.countStore.count
    }
  },
  methods: {
    tiJiao () {
      // 先判断是否非空
      if (this.inputValue) {
        // 获取mutations的方法：
        // this.$store.commit('配置模块名/mutations中的方法名', 传递的参数)
        this.$store.commit('personStore/ADD_PERSON', this.inputValue)
        // 清空输入框
        this.inputValue = ''
      } else {
        alert('不能为空！')
      }
    },
    suiji () {
      // 获取actions的方法：
      // this.$store.dispatch('配置模块名/mutations中的方法名', 传递的参数)
      this.$store.dispatch('personStore/suiji')
    }
  }
}
</script>
